<template>
  <div class="header">
    <fheader></fheader>
    <div class="box"></div>
    <el-row>
      <el-col :span="18">
        <!-- <el-select v-model="value" placeholder="请选择" style="margin-top:100px;">
          <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
          </el-option>
        </el-select> -->
        <el-card v-for="(e, index) in newsList.slice((currentPage-1)*PageSize,currentPage*PageSize)" :key="index"
          style="margin:20px 160px;">
          <div style="display:flex;">
            <div class="left-content" style="display:flex;flex-direction: column;align-items: center;">

              <div class="son">
                {{10 > index+1  ? '0' + parseInt(index+1) : index+1}}
              </div>

            </div>
            <div style="margin: 0 100px;width:500px;">
              <div style="font-weight:bold;font-size:30px;margin:20px 0;">
                {{e.title}}
              </div>
              <div class="left-content-3li" style="font-size:20px;">
                {{e.brief}}
              </div>
            </div>
            <div style="width:1px;height:120px;border-left:1px solid black;margin-top:10px;"></div>
            <div style="margin:auto">
              <a :href="e.url">阅读更多</a>
            </div>
          </div>
        </el-card>
        <el-pagination layout="prev, pager, next" :total="total" @size-change="handleSizeChange"
          @current-change="handleCurrentChange" style="margin-left:160px;">
        </el-pagination>

      </el-col>
      <el-col :span="5" class="">
        <div class="right-background"></div>
        <div class="grid-content bg-purple" style="margin-left: 60px">
          <div style="font-size: 24px; margin-top: 100px; font-weight: bold">
            最新新闻
          </div>
          <el-card style="margin-top: 10px">
            <div>
              <ul style="display: flex; flex-direction: column">
                <li class="foodTitle mp-10 " v-for="(i, index) in newsList.slice(0,9)" :key="index">
                  <i class="el-icon-star-on" style="margin-top:5px;"></i>
                  <div class="li-1" style="">
                    {{ i.title }}
                  </div>
                </li>
              </ul>
            </div>
          </el-card>
          <!-- <strong style="font-size: 24px; position: relative; top: 70px">美食展示</strong>
          <ul class="flex">
            <li v-for="item in foodsList" :key="item.id" style="width: 100%">
              <el-card class="card">
                <div style="display: flex; flex-direction: column">
                  <img style="width: 100%; height: 250px" :src="item.image" alt="" />
                  <div class="card-right" style="">
                    <h2 style="margin-top: 20px">{{ item.title }}</h2>
                  </div>
                </div>
              </el-card>
            </li>
          </ul> -->
        </div>
      </el-col>
    </el-row>
    <Ffooter />
  </div>
</template>

<script>
  import fheader from "@/components/Header.vue";
  import Ffooter from '@/components/footer.vue'
  export default {
    components: {
      fheader,
      Ffooter
    },
    data() {
      return {
        foodsList: [],
        beautyList: [],
        foodsTiteList: [],
        newsList: [],
        options: [{
          value: '选项1',
          label: '黄金糕'
        }, ],
        value: "",
        total: null,
        currentPage: 1,
        PageSize: 10,
      };
    },
    mounted() {
      this.getFoodList();
      this.getbeautyList();
    },
    methods: {
      getFoodList() {
        // this.$api.food.getFood().then((response) => {
        //   this.foodsList = response.data;
        //   response.data.map((item) => {
        //     this.foodsTiteList.push(item.title);
        //   });
        // });
        this.axios({
            method: 'get',
            url: 'https://api.iyk0.com/ysxw/',
            responseType: 'stream'
          })
          .then(res => {
            console.log(res);
            this.newsList = res.data.data
            this.total = res.data.sum
          })
      },
      getbeautyList() {
        this.$api.beauty.getBeauty().then((res) => {
          this.beautyList = res.data;
        });
      },
      handleSizeChange(val) {
        // 改变每页显示的条数 
        this.PageSize = val
        // 注意：在改变每页显示的条数时，要将页码显示到第一页
        this.currentPage = 1
      },
      handleCurrentChange(val) {
        // 改变默认的页数
        this.currentPage = val
      },
    },
  };

</script>

<style lang="scss" scoped>
  .flex {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    // position: relative;
  }

  .box {
    // position: absolute;
    top: 0;
    // z-index: 0;
    width: 100%;
    height: 500px;
    // background: rgba(1, 94, 75, 0.5);
    background: url("https://images.unsplash.com/photo-1640782544167-391b83f75c98?ixid=Mnw4OTgyNHwwfDF8c2VhcmNofDE4fHwlRTklQTMlOEUlRTYlOTklQUZ8ZW58MHx8fHwxNjQ5MjI2Mzk2&ixlib=rb-1.2.1&w=750&dpi=2") no-repeat;
    background-size: 100% 100%;
  }

  // >>>.el-card__body {
  //   // display: flex;

  // }
  .left-content {
    font-size: 30px;

    .son {
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 108px;
      border: 1px solid black;
      padding: 36.5px 0;

      &:after {
        content: '';
        width: 1.5rem;
        border-bottom: 1px dashed black;
      }
    }
  }

  .left-content::before,
  .left-content::after {
    content: '';
    width: 1px;
    height: 50px;
    border-left: 1px solid black;
  }

  .left-content-3li {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
  }

  .li-1 {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
  }

  .card {
    width: 100%;
    height: 400px;

    .card-right {
      flex: 1;
      display: inline-block;
    }
  }

  .flex>li {
    z-index: 2;
    // width: 1440px;
    // height: 400px;
    margin-top: 80px;
    margin-bottom: 20px;
    // border: 1px solid black;
  }

  .right-background {
    position: absolute;
    width: 25%;
    height: 100%;
    background: url("../assets/foodbackground.png");
    opacity: 0.05;
  }

  .foodTitle:not(:last-child) {
    border-bottom: 1px solid rgba(0, 0, 0, 0.349);
  }

  .mp-10 {
    display: flex;
    margin: 5px 10px;
    padding: 0px 0 15px 0px;
    font-size: 24px;
    font-weight: bold;
  }

  // .mp-10::before {
  //   content: "";
  //   height: 20px;
  //   width: 20px;
  //   position: relative;
  //   top: 2px;
  //   margin-top: 5px;
  //   background: url("../assets/folk.png") no-repeat;
  //   background-size: 100%;
  // }

</style>>
